<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'estate.label', default: 'estate')}"/>
    <title>逾期行为总体概况</title>
</head>
<body class="fixed-navbar fixed-sidebar">
<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right">
                <ol class="hbreadcrumb breadcrumb">
                    <li>CINDATA PLS</li>
                    <li class="active">
                        <span>逾期行为总体概况</span>
                    </li>
                </ol>
            </div>

            <h2 class="font-light m-b-xs">
                %{--<i id="goBack" class="pe-7s-back fa-2x" style="position: absolute; top: 8px;"></i>--}%
                <span>逾期行为总体概况</span>
            </h2>
        </div>
    </div>
</div>
<g:include view="analyze/common.gsp"></g:include>

<div class="row">
    <div class="hpanel hgreen">
        <div class="panel-heading">
            <div class="panel-tools">
                <a class="showhide"><i class="fa fa-chevron-up"></i></a>
            </div>
            逾期行为总体概况
        </div>
        <div class="panel-body">
            <div id="repaymentAmount" style="width: 100%;height: 420px;"></div>
        </div>
    </div>
</div>

<asset:javascript src="echarts/echarts-all-3.js" />
<asset:javascript src="main/repaymentAmountPerMonth.js" />

<script>
    window.onload = function () {
        function initCharts (data){
            $.ajax({
                type: "POST",
                url: "/analyze/overdueActionCollectivityAnalysisData",
                data:data,
                success: function (msg){
                    var myChart = echarts.init($('#repaymentAmount').get(0));
                    console.log(msg.resultList);
                    var allData = msg.resultList,
                        counts = [];
                        qinums = [],
                        amounts = [];
                    allData.forEach(function(data,index){
                        counts[index] = data.counts;
                        qinums[index] = data.qinum;
                        amounts[index] = data.amount;
                    });
                    option = {
                        title: {
//                            text: '逾期行为总体概况'
                        },
                        legend: {
                            data:['逾期笔数','逾期金额'],
                            textStyle: {
                                color : "#ADADAD"
                            },
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            },
                            // formatter:'{b0}<br/>逾期笔数：{c0}</br> 逾期金额：{c1} 元</br>'
                            formatter: function(params) {
                                var res = '<div>';
                                res += '<strong>' + params[0].name + '</strong>'
                                for (var i = 0, l = params.length; i < l; i++) {
                                    if (params[i].seriesName == '逾期笔数') {
                                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 笔'
                                    }
                                    if (params[i].seriesName == '逾期金额') {
                                        res += '<br/>' + params[i].seriesName + ' : ' + params[i].value + ' 元'
                                    }
                                }
                                res += '</div>';
                                return res;
                            }
                        },
                        xAxis:{
                                type: 'category',
                                //data: ['逾期1期','逾期2-6期','逾期6期以上']
                                data:qinums,
                                axisLine:{
                                    lineStyle:{
                                        color:'#ADADAD',
                                    }
                                },
                            },
                        yAxis: [
                            {
                                type: 'value',
                                name: '逾期笔数',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#ADADAD',
                                    }
                                },
                            },
                            {
                                type: 'value',
                                name: '逾期金额（单位/元）',
                                axisLabel: {
                                    formatter: '{value}'
                                },
                                axisLine:{
                                    lineStyle:{
                                        color:'#ADADAD',
                                    }
                                },
                            }
                        ],
                        series: [
                            {
                                name:'逾期笔数',
                                type:'bar',
                                barWidth : 50,//柱图宽度
                                data:counts,

                               // data:[1000,20000,3000]
                            },
                            {
                                name:'逾期金额',
                                type:'line',
                                yAxisIndex: 1,
                                data:amounts
                                //data:[25000000,20000000,10000000]
                            }
                        ]
                    };

                    myChart.setOption(option);
                    window.onresize = function () {
                        myChart.resize()
                    };
                }
            })};
        initCharts();
        $('#searchData').click(function(){
            $('#one').siblings().removeClass('active');
            $('#one').addClass('active');
            var inputData = [],
                citys = $('#city').val(),
                districts = $('#district').val(),
                loansBalanceStarts = $('#loansBalanceStart').val(),
                loansBalanceEnds =  $('#loansBalanceEnd').val(),
                loansAmountStarts = $('#loansAmountStart').val(),
                loansAmountEnds = $('#loansAmountEnd').val(),
                startDateStarts = $('#startDateStart').val(),
                startDateEnds = $('#startDateEnd').val(),
                loansDurations = $('#loansDuration').val(),
                remainTimes = $('#remainTime').val(),
                risk = $('#risk').val(),
                buildAreaEnds = $('#buildAreaEnd').val(),
                buildAreaStarts = $('#buildAreaStart').val(),
                endDateStarts = $('#endDateStart').val(),
                endDateEnds = $('#endDateEnd').val(),
                inputData = {
                    city:citys,
                    district:districts,
                    loansBalanceStart:loansBalanceStarts,
                    loansBalanceEnd:loansBalanceEnds,
                    loansAmountStart:loansAmountStarts,
                    loansAmountEnd:loansAmountEnds,
                    startDateStart:startDateStarts,
                    startDateEnd:startDateEnds,
                    loansDuration:loansDurations,
                    remainTime:remainTimes,
                    risk:risk,
                    buildAreaEnd:buildAreaEnds,
                    buildAreaStart:buildAreaStarts,
                    endDateStart:endDateStarts,
                    endDateEnd:endDateEnds
                };

            initCharts(inputData)
        });
    }
</script>
<script>
    $(function(){
        $('#goBack').click(function(){
            window.history.back(-1);
        })
    })
</script>
</body>
</html>